<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>便民药店后台系统</title>
<meta http-equiv="x-ua-compatible" content="IE=10,9,8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="自助打印" />
<link rel="apple-touch-icon-precomposed" href="static/images/i/edu.png">

<link rel="stylesheet" href="static/js/Layui-v2.5.5/layui/css/layui.css"
	media="all" />

<script src="static/js/area.js"></script>
<script src="static/js/jquery-2.1.0.min.js"></script>
<script src="static/js/date.format.js"></script>

<link rel="stylesheet"
	href="static/js/Layui-formSelects-master/dist/formSelects-v4.css"
	media="all" />

<style type="text/css">
* {
	box-sizing: content-box;
}
/*如果 layui 数据表格列宽自适应出现横向滚动条的解决方案*/
body {
	overflow-y: scroll;
}
/*解决有水平滚动条问题*/
.childrenBody {
	padding: 10px;
}


html,body{
    width:100%;
    height:100%;
}
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
.btn{
    width:142px;
}
#container{
    min-width:500px;
    min-height:400px;
}

</style>
</head>
<body class="childrenBody" onload="init()">
	<form id="infoListForm" class="layui-form layui-row layui-col-space10">
		<div class="layui-col-md9 layui-col-xs12">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">药店信息</li>
				</ul>

				<div class="layui-tab-content" style="height: 100px;">
				
				<input type="hidden" id="update" value="${status}"/> 
				
					<div class="layui-form layui-tab-item layui-show">
						<input type="hidden" class="layui-input" name="id"
							value="${store.id}">


						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md5">
								<input type="hidden" id="provinceValue" value ="${store.province}"/>
								<label class="layui-form-label">省份<font color="red">*</font></label>
								<div class="layui-input-block">
								
									<select id="s_province" name="s_province" lay-filter="province">
										<option value="">请选择省份</option>
									</select>
								</div>
							</div>

							<div class="layui-inline layui-col-md5">
								<input type="hidden" id="cityValue" value ="${store.city}"/>
								<label class="layui-form-label">城市<font color="red">*</font></label>
								<div class="layui-input-block">
									<select id="s_city" name="s_city">
										<option value="">请选择城市</option>
										
										
									</select>
								</div>
							
							</div>
						</div>
						
						
						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">搜索词</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" id="keyword"
										 placeholder="请输入搜索关键字" />
								</div>
							</div>

							<div class="layui-inline layui-col-md5">
								<button type="button" class="layui-btn"  onclick="searchKeyword()">查询</button>
							</div>
						</div>

					
						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md10">
								<!--   定义地图显示容器   -->
								 <div  id="container"></div>
    							<!--  <div style='width: 500px; height: 180px' id="infoDiv"></div> -->
							</div>
						</div>
						

						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">店名<font color="red">*</font></label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="drugStore" id="drugStore"
										value="${store.drugStore}" lay-verify="required" placeholder="请输入店名"
										/>
								</div>
							</div>


							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">门店电话<font color="red">*</font></label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="phoneStore" id="phoneStore"
										value="${store.phoneStore}" placeholder="请输入门店电话" lay-verify="required"/>
								</div>
							</div>
						</div>

						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">经度<font color="red">*</font></label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="longitude" id="longitude"
										value="${store.longitude}" lay-verify="required"
										placeholder="请输入经度" />
								</div>
							</div>


							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">维度<font color="red">*</font></label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="latitude" id="latitude"
										value="${store.latitude}" placeholder="请输入维度" />
								</div>
							</div>
						</div>


						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">门店地址<font color="red">*</font></label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="address" id="address"
										value="${store.address}" lay-verify="required"
										placeholder="请输入门店地址" />
								</div>
							</div>


							<div class="layui-inline layui-col-md5">
								<label class="layui-form-label">营业时间</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="businessHours" id="businessHours"
										value="${store.businessHours}" placeholder="请输入营业时间" />
								</div>
							</div>
						</div>

						<div class="layui-row layui-col-space10">
							<div class="layui-inline layui-col-md10">
								<label class="layui-form-label">库存情况</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" name="stock"
										value="${store.stock}" placeholder="请输入库存情况" />
								</div>
							</div>
						</div>
      				 <div class="layui-row layui-col-space10">
                        <div class="layui-inline layui-col-md10">
                            <label class="layui-form-label">详细介绍</label>
                            <div class="layui-input-block">
                                <textarea id="introducingDetails" name="introducingDetails" rows="3" class="layui-textarea" placeholder="请输入详细介绍">${store.introducingDetails}</textarea>
                            </div>
                        </div>
                    </div>




					</div>
				</div>




			</div>
		</div>
		<div class="layui-col-md3 layui-col-xs12">
			<blockquote class="layui-elem-quote title magt10">
				<i class="layui-icon">&#xe609;</i>
				<c:if test="${empty view }">
				 	保存
				 </c:if>
			</blockquote>
			<div class="border">
				<br />
				<hr class="layui-bg-gray" />
				<div class="layui-right">
					<c:if test="${view eq 1 }">
						<a class="layui-btn layui-btn-sm" onclick="closeBasic();"><i
							class="layui-icon">&#x1006;</i>返回</a>
					</c:if>
					<c:if test="${empty view }">
						<a class="layui-btn layui-btn-sm" lay-filter="addBasic" lay-submit><i
							class="layui-icon">&#xe609;</i>保存</a>
					</c:if>
				</div>
			</div>
		</div>
	</form>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=MVNBZ-4QAC3-6RU3R-36RHT-CMBWZ-7KFVX"></script>
	<script type="text/javascript"
		src="static/js/Layui-v2.5.5/layui/layui.js"></script>
	<script type="text/javascript">
		//全局定义一次, 加载formSelects
		layui.config({
			base : 'static/js/Layui-formSelects-master/dist/' //此处路径请自行处理, 可以使用绝对路径
		}).extend({
			formSelects : 'formSelects-v4'
		});

		layui
				.use(
						[ 'form', 'layer', 'layedit', 'laydate', 'upload',
								'element', 'table', 'formSelects' ],
						function() {
							var form = layui.form, layer = parent.layer === undefined ? layui.layer
									: top.layer, laypage = layui.laypage, upload = layui.upload, layedit = layui.layedit, laydate = layui.laydate, element = layui.element;
							table = layui.table;
							formSelects = layui.formSelects;
							$ = layui.jquery;
							//时间格式化
							/*   laydate.render({
							       elem: '#opsDate', //指定元素
							       type: 'datetime'
							   });*/

							form.verify({

							});
							   
							form.on('select(province)', function (data) {
							    var index=$("select[name=s_province").val();
							 
							    var arr = dsy.Items["0_"+index];
							    
							    
							    $("#s_city").empty();
							    $.each(arr,function(index,value){
									$("#s_city").append("<option value="+index+">"+value+"</option>"); 
								});
							    form.render('select');
							    
							 });   

							form
									.on(
											"submit(addBasic)",
											function(data) {

												//弹出loading
												var index = top.layer.msg(
														'数据提交中，请稍候', {
															icon : 16,
															time : false,
															shade : 0.8
														});

												var params = $("#infoListForm")
														.serializeArray();
												params.push({name:"province",value:$("#s_province").find("option:selected").text()});
												params.push({name:"city",value:$("#s_city").find("option:selected").text()});
												
										
												$
														.ajax({
															url : "${pageContext.request.contextPath}/pharmacy/saveStore",
															//dataType: "json",
															type : "POST",
															//  contentType: 'application/json;charset=UTF-8',
															data : params,
															success : function(
																	result) {

																if (result != null) {
																	var data = $
																			.parseJSON(result);
																	if (data.code == "1") {
																		setTimeout(
																				function() {
																					top.layer
																							.close(index);
																					top.layer
																							.msg("保存成功！");
																					layer
																							.closeAll("iframe");
																					//刷新父页面
																					parent.location
																							.reload();
																				},
																				500);
																	} else {
																		top.layer
																				.msg("保存失败！");
																		return false;
																	}

																}

															}
														});
											});

						});
		
		
		
		
		
		
		
		
		
		
		function initProvince(){
			
			var provinceName = $("#provinceValue").val();
			
			var cityName = $("#cityValue").val();
			
			
			var arr = dsy.Items["0"];
			$.each(arr,function(index,value){
				if(provinceName==value){
					$("#s_province").append("<option selected value="+index+">"+value+"</option>"); 
					
					 var city_arr = dsy.Items["0_"+index];
					    

					 $.each(city_arr,function(index,value){
						 if(cityName==value){
							 $("#s_city").append("<option selected value="+index+">"+value+"</option>"); 
						 }else{
							 $("#s_city").append("<option value="+index+">"+value+"</option>"); 
						 }
							
				     });
					
				}else{
					$("#s_province").append("<option  value="+index+">"+value+"</option>"); 
				}
				
			});
			
		}
		
		
		initProvince();
		
		 var searchService, markers = [];
	        var init = function() {
	        	//经度
    	    	var longitude = $("#longitude").val();
    	    	//维度
    	    	var latitude = $("#latitude").val();
	            var center = new qq.maps.LatLng(39.9, 116.4);
	            if(longitude!=null && latitude!=null){
	            	center = new qq.maps.LatLng(latitude, longitude);
	            }
	            var map = new qq.maps.Map(document.getElementById('container'), {
	                center: center,
	                zoom: 13
	            });
	            
	            //修改时根据维度直接定位
	            var updateStatus = $("#update").val();
	    	    if(updateStatus=='update'){
	    	    	
	    	    	//店名
	    	    	var drugStore = $("#drugStore").val();
	    	    	//电话
	    	    	var phoneStore = $("#phoneStore").val();
	    	    	//地址
	    	    	var address = $("#address").val();
	    	    	
	    	    	
	    	    	var latLng = new qq.maps.LatLng(latitude, longitude);
	    	    	
	    	    	//创建marker
	    	        var marker1 = new qq.maps.Marker({
	    	            position: latLng,
	    	            map: map
	    	        });
	    	        
	    	        //添加到提示窗
	    	        var info1 = new qq.maps.InfoWindow({
	    	            map: map
	    	        });
	    	        
	    	        //覆盖物添加点击事件
	    	    	qq.maps.event.addListener(marker1, 'click', function(event) {
	    	    		info1.open(); 
	    	    		info1.setContent('<div style="text-align:left;white-space:nowrap;width:240px;height:60px;margin:10px"><p>'+drugStore+'</p><p>'+phoneStore+'</p><p>'+address+'</p></div>');
	    	    		info1.setPosition(latLng); 
	    	    	  });
	    	    	
	    	    }
	            
	            
	          

	            var latlngBounds = new qq.maps.LatLngBounds();
	            //设置Poi检索服务，用于本地检索、周边检索
	            searchService = new qq.maps.SearchService({
	                //设置搜索范围为北京
	                // location:'北京',
	                //设置搜索页码为1
	                pageIndex: 1,
	                //设置每页的结果数为5
	                pageCapacity: 10000,
	                //设置展现查询结构到infoDIV上
	               // panel: document.getElementById('infoDiv'),
	                //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
	                autoExtend: true,
	                //检索成功的回调函数
	                complete: function(results) {
	                	
	           
	                    //设置回调函数参数
	                    var pois = results.detail.pois;
	                    var storeName = null;
	                    for (var i = 0, l = pois.length; i < l; i++) {
	                        var poi = pois[i];
	                        
	                     
	                       
	                        //扩展边界范围，用来包含搜索到的Poi点
	                        latlngBounds.extend(poi.latLng);
	                        var marker = new qq.maps.Marker({
	                            map: map,
	                            position: poi.latLng,
	                            content:name
	                      
	                            
	                        });
	                        
	                        //***将必要的数据存入每一个对应的marker对象
	                        marker.id = poi.id;
	                        marker.name = poi.name;
	                        marker.address = poi.address;
	                        marker.phone=poi.phone;
	                        
	                        
	                        //添加到提示窗
	                        var info = new qq.maps.InfoWindow({
	                            map: map
	                        });
	                        
	                        //覆盖物添加点击事件
          				    qq.maps.event.addListener(marker, 'click', function(event) {
          				    	console.log(event);
          				    	$("#drugStore").val(this.name);
          				    	$("#phoneStore").val(this.phone);
          				    	$("#address").val(this.address);
          				    	$("#longitude").val(event.latLng.lng);
          				    	$("#latitude").val(event.latLng.lat);
          					
          					  info.open(); 
          			          info.setContent('<div style="text-align:left;white-space:nowrap;width:240px;height:60px;margin:10px"><p>'+this.name+'</p><p>'+this.phone+'</p><p>'+this.address+'</p></div>');
          			          info.setPosition(event.latLng); 
          				  });

	                        marker.setTitle(i + 1);

	                        markers.push(marker);

	                    }
	                    //调整地图视野
	                    map.fitBounds(latlngBounds);
	                },
	                //若服务请求失败，则运行以下函数
	                error: function() {
	                    alert("出错了。");
	                }
	            });

	        }

	         //清除地图上的marker
	            function clearOverlays(overlays) {
	                var overlay;
	                while (overlay = overlays.pop()) {
	                    overlay.setMap(null);
	                }
	            }
	            //设置搜索的范围和关键字等属性
	            function searchKeyword() {
	            	var city = $("#s_city").find("option:selected").text();
	            	
	            	if(city==null || city=='' || city==undefined){
	            		layer.alert("城市不可为空!");
		            	return;
	            	}
	            	
	            	//根据输入的城市设置搜索范围
	                searchService.setLocation(city);
	            	
	            	
	                var keyword = document.getElementById("keyword").value;
	                
	                if(keyword==null || keyword=='' || keyword==undefined){
	            		layer.alert("查询参数不可为空!");
		            	return;
	            	}
	                
	                clearOverlays(markers);
	                //根据输入的城市设置搜索范围
	                // searchService.setLocation("北京");
	                //根据输入的关键字在搜索范围内检索
	                searchService.search(keyword);
	            }
	            

	    
	  
	            
	            
		function closeBasic() {
			var index = top.layer.msg('正在关闭，请稍候', {
				icon : 16,
				time : false,
				shade : 0.8
			});

			setTimeout(function() {
				top.layer.close(index);
				layer.closeAll("iframe");
				//刷新父页面
				parent.location.reload();
			}, 500);

			return false;
		}

		//时间戳转日期
		function dateFormat(timeStamp) {
			var date = new Date(timeStamp);
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			m = m < 10 ? '0' + m : m;
			var d = date.getDate();
			d = d < 10 ? ("0" + d) : d;
			var h = date.getHours();
			h = h < 10 ? ("0" + h) : h;
			var M = date.getMinutes();
			M = M < 10 ? ("0" + M) : M;
			var S = date.getSeconds();
			S = S < 10 ? ("0" + S) : S;
			var str = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + S;
			return str;
		}

		function validataNum(param, length) {
			var reg = new RegExp("^[0-9]*$");
			if (!reg.test(param)) {
				return false;
			}
			if (param.length > length) {
				return false;
			}

			return true;
		}
	</script>
</body>
</html>
